// 2018年各乡镇完成情况
// <!--轮询-->

var chart = echarts.init(document.getElementById('mb-towns-hold-charts'));
setInterval(function(){
    $('#mb-towns-hold-charts').css('width',$('.mb-towns-hold').width()-40)
    chart.resize();
},200)
// chart.showLoading();//显示等待条
// //设置图表显示的内容

// $('.mb-r-con').resize(function(){
//     chart.resize();
//     //当id为main的div大小变化时的处理函数写在这里.....
//     //当然了#main只不过是id选择器，你也可以换成任何jquery的选择器......
// });

window.addEventListener('resize', function(){
    chart.resize();
})
var option = {

    label:{
        color: '#fff',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#fff'
            }
        }
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    grid: {
        bottom:30,
        left:40,
        right:45,
    },
    legend: {
        selectedMode: false,//不可点击
        data:['目标数','实际完成数','完成率'],
        textStyle: {
            color: '#fff'
        }
    },
    xAxis: [

        {
            type: 'category',
            data: ['乡镇一','乡镇二','乡镇三','乡镇四','乡镇五','乡镇六','乡镇七','乡镇八','乡镇九','乡镇十'],
            axisPointer: {
                type: 'shadow',
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 1500,
            interval: 300,
            axisLabel: {
                formatter: '{value} ',
                textStyle: {
                    color: '#fff'
                }
            }
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value} %',
                textStyle: {
                    color: '#fff'
                }
            }
        }
    ],
    series: [


        {
            name:'目标数',
            type:'bar',
            itemStyle: {
                //通常情况下：
                normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: '#624ab2'
                },
            },
            data:[450, 560, 984, 432, 789, 673, 1000, 1345, 1234, 241]
        },
        {
            name:'实际完成数',
            type:'bar',
            itemStyle: {
                //通常情况下：
                normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: '#c15ee1'
                },
            },
            data:[260, 270, 456, 322, 324, 234, 452, 182, 543, 18]
        },
        {
            name:'完成率',
            type:'line',
            yAxisIndex: 1,
            itemStyle : {
                normal: {
                    label : {

                        show: true,
                    },
                    lineStyle:{
                        color:'#a8690e'
                    },
                    color:'#fff',
                }
            },
            data:[56, 54, 78, 56, 43, 100, 57, 78, 45, 16]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//两秒后关闭等待进度条
setTimeout(function () {
    chart.hideLoading();//隐藏等待条
}, 2000);
